<template>
    <div class="tkyx">
        <div class="cover"></div>
        <div id="regBox">
            <ul>
                <li class="zcbox1">
                    <div class="zcbox">
                        <h3>注册</h3>
                        <router-link to="/loginRlist"><a href="#"> 快捷登录</a></router-link> 
                    </div>
                </li>
            </ul>
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
                class="demo-ruleForm">
                <el-form-item label="" prop="phone">
                    <el-input v-model="ruleForm. phone" type="tel" autocomplete="off" placeholder="手机号"  />
                </el-form-item>
                <el-form-item label="" prop="nickname">
                    <el-input v-model="ruleForm.nickname" type="type" autocomplete="off" placeholder="昵称" />
                </el-form-item>
                <el-form-item label="" prop="code">
                    <el-input v-model="ruleForm.code" placeholder="验证码"></el-input>
                    <el-button @click="sendCode" v-show="show"  >获取验证码</el-button>
                    <el-button :disabled='isDisabled' v-show="!show" class="blue">{{count}}秒后重新发送</el-button>
                </el-form-item>
                <el-form-item label="" prop="passwd">
                    <el-input v-model="ruleForm.passwd" type="password" autocomplete="off" placeholder="密码" />
                </el-form-item>
                <el-form-item label="" prop="retPasswd">
                    <el-input v-model="ruleForm.retPasswd" type="password" autocomplete="off" placeholder="再次确认密码" />
                </el-form-item>
                <!--  -->
                <el-row>
                    <el-checkbox class="checkBox" v-model="rAgree" label="同意用户使用准则" name="type" />
                </el-row>
                <div class="resryzm">
                    <el-form-item class="dq">
                        <el-button type="primary" @click="submitForm">确定</el-button>
                        <el-button @click="resetForm">重置</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>

    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { getcode, regLogin } from '@/utils/api'
import type { FormInstance } from 'element-plus'
interface myFormDataTypeI {
    phone: string;
    passwd: string;
    retPasswd: string,
    qq:string,
}
export default defineComponent({
    data() {
        const validatePhone = (rule: any, value: any, callback: any) => {
            if (value === '') {
                callback(new Error('请输入手机号'))
            } else if (!/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(value)) {
                callback(new Error('手机号不合法'))
            } else {
                callback()
            }
        }
        const validatePass = (rule: any, value: any, callback: any) => {
            if (value === '') {
                callback(new Error('请输入密码'))
            } else if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(value)) {
                callback(new Error('至少八位，必须包含字母和数字'))
            } else {
                callback()
            }
        }
        const validateRetPass = (rule: any, value: any, callback: any) => {
            if (value === '') {
                callback(new Error('再次输入密码'))
            } else if (value !== (this.ruleForm as unknown as myFormDataTypeI).passwd) {
                callback(new Error('两次输入的密码没有保持一致'))
            } else {
                callback()
            }
        }
        const checkSmscode = (rule: any, value: any, callback: any) => {
            if (value === '') {
                callback(new Error('请输入手机验证码'))
            } else if (value !== this.codeYzm) {
                callback(new Error('验证码不正确'))
            } else {
                callback()
            }
        }
        const checkNickname = (rule: any, value: any, callback: any) => {
            if (value === '') {
                callback(new Error('请输入昵称'))
            } else if (!/^[\u4e00-\u9fa5]{2,6}|[a-zA-Z]{2,12}$/.test(value)) {
                callback(new Error('至少2~6汉字或2-12字母字符'))
            } else {
                callback()
            }
        }
        return {
            tiemr1:0,//登录成功之后几秒跳转到登录页面
            // undefined:undefined,//判断是否输入值
            codeYzm: 0,//出验证码初始化
            count: 0,
            sid: 0,
            show: true,
            rAgree: '',
            // buttonText: '发送验证码',
            isDisabled: false, // 是否禁止点击发送验证码按钮
            arrCode: [],
            labelPosition: '',
            ruleForm: {
                phone: '', //手机号
                code: '', //获取验证码
                nickname: '', //昵称
                passwd: '',//密码
                retPasswd: "",//再次确认密码
            },
            rules: {
                phone: [{ validator: validatePhone, trigger: 'blur' }],
                passwd: [{ validator: validatePass, trigger: 'blur' }],
                retPasswd: [{ validator: validateRetPass, trigger: 'blur' }],
                code: [{ validator: checkSmscode, trigger: 'blur' }],
                nickname: [{ validator: checkNickname, trigger: 'blur' }],


            }

        }

    },
    components: {
    },
    methods: {
        // 重置
        resetForm() {
            const formEl = this.$refs.ruleFormRef as FormInstance;
            if (!formEl) return
            formEl.resetFields()
        },
        //确定按钮
        submitForm() {
            const formEl = this.$refs.ruleFormRef as FormInstance;
            if (!formEl) return;
            formEl.validate((valid) => {
                if (valid) {
                    //进行正常的ajax处理的
                    regLogin(this.ruleForm).then( (res: any) => {
                        console.log(res);
                        if(res.data.code ===0){
                            alert(res.data.msg)
                        }else if(res.data.code===-1){
                            alert(res.data.msg)
                        }else {     
                            alert(res.data.msg)
                            this.$router.push({path:'/loginRlist'})
                        }        
                    }).catch(function (error: any) {
                        console.log(error);
                    });
                } else {
                    return false;
                }
            })
        },
        //发送验证码
        sendCode() {
            getcode(this.ruleForm.phone).then((res) => {
                if (res.status == 200) {
                    const num = 60;
                    if (!this.sid) {
                        this.count = num;
                        this.show = false;
                        this.sid = window.setInterval(() => {
                            if (this.count > 0 && this.count <= num) {
                                this.count--;
                            } else {
                                this.show = true;
                                clearInterval(this.sid);
                                this.sid = 0;
                            }
                        }, 1000);
                    }
                    //从服务器拿回来的验证码
                    this.codeYzm = res.data.check
                } else {
                    alert('信息有误')
                }


            }).catch(function (error) {
                console.log(error);
            });

            // } else {
            //     alert('请输入账号')
            // }
        },

    },
    mounted() {
        // this.fnn()
        // console.log(this.arrCode);


    },
    
})
</script>

<style lang="scss" scoped>
.resryzm {
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
}

.dq {
    margin-left: 107px;
    // width: 220px;
    color: red;
    font-size: 16px;
    margin-bottom: 20px;
}

:deep(.el-button) {
    background-color: #999;
}

:deep(.el-form-item__content) {
    margin-left: 225px;
}

:deep(.el-row) {
    margin-left: 120px;
}

:deep(.el-button) {
    color: #fff;
    font-size: 3px;
    width: 105px;
    height: 33px;
    background: #A67D3D;
    position: relative;
    top: 3px;
    left: -103px;
}

:deep(.el-form-item__content) {
    flex-wrap: nowrap;
}


.senCo {
    margin-bottom: 60px;
}

.cover {
    /*固定定位*/
    position: fixed;
    /*上下左右都为0*/
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /*背景颜色*/
    background-color: rgb(0, 0, 0);
    // background-image: url(../../assets/22.jpg);
    // background-repeat: no-repeat;
    // background-size: 100%;
    opacity: 0.2;
    /*模态框*/
    z-index: 99;
}

#regBox {
    background-color: #fff;
    width: 500px;
    /*固定定位*/
    position: fixed;
    /*从左往右占50%*/
    left: 50%;
    /*从上到下占50%*/
    top: 30%;
    /*模态框*/
    z-index: 100;
    /*从右往左移动*/
    margin-left: -256px;
    /*从下往上移动*/
    margin-top: -100px;

}

.zcbox1 {
    margin-left: 18px;
    width: 350px;

    >.zcbox {
        position: relative;
        margin-top: 20px;
        width: 300px;
        display: flex;
        justify-content: space-between;

        h3 {
            margin-left: 73px;
            height: 35px;
            line-height: 35px;
            font-size: 30px;
            color: #666;
            font-weight: 500;
            overflow: hidden;
        }

        a {
            position: absolute;
            bottom: 2px;
            right: -50px;
            display: inline-block;
            height: 20px;
            line-height: 20px;
            text-align: center;
            margin-left: 20px;
            cursor: pointer;
            font-size: 12px;
            color: #999;
            font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Noto Sans CJK SC, Lantinghei SC, Microsoft YaHei, WenQuanYi Micro Hei, Arial, sans-serif;
        }
    }
}

.el-form-item {
    margin-bottom: 9px;
    margin-right: 10px;
}

:deep(.el-input) {
    height: 35px;
    margin-top: 10px;
    margin-right: 104px;
    outline: none;
    font-family: Arial, Helvetica, sans-serif;
    border: none;
    background: none;
    vertical-align: middle;
}

</style>